<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HzSparrowAI - 智能问答系统</title>
    <link rel="stylesheet" href="css/index-font.css">
    <link rel="stylesheet" href="assets/icons/bootstrap-icons.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/document-detail.css">
    <link rel="stylesheet" href="css/document-form.css">
</head>
<body>
    <!-- 主容器 -->
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <div class="app-logo">
                    <i class="bi bi-chat-square-text-fill"></i>
                    <span>HzSparrowAI</span>
                </div>
                <button class="toggle-sidebar-btn">
                    <i class="bi bi-layout-sidebar"></i>
                </button>
            </div>

            <div class="sidebar-section">
                <button class="new-chat-btn" onclick="createNewConversation()">
                    <i class="bi bi-chat"></i>
                    <span>开始新对话</span>
                </button>
            </div>

            <div class="sidebar-section-title">
                <span>今天</span>
            </div>
            
            <div id="conversation-items" class="conversation-list">
                <div class="empty-placeholder">
                    <i class="bi bi-chat-square-text"></i>
                    <p>暂无对话记录</p>
                    <p class="hint">点击"开始新对话"开始聊天</p>
                </div>
            </div>
            
            <div class="sidebar-section-title">
                <span>30天内</span>
            </div>
            
            <div class="history-conversations">
                <!-- 历史对话将通过JavaScript动态生成 -->
            </div>
            
            <div class="sidebar-section-title">
                <span>2025-03</span>
            </div>
            
            <div class="archived-conversations">
                <!-- 存档对话将通过JavaScript动态生成 -->
            </div>
            
            <div class="sidebar-footer">
                <div id="username-display" class="user-info">
                    <!-- 用户信息将在这里显示 -->
                </div>
                <button class="logout-btn" onclick="logout()">
                    <i class="bi bi-box-arrow-right"></i>
                    <span>退出登录</span>
                </button>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 顶部导航 -->
            <div class="top-nav">
                <div class="chat-tabs">
                    <div class="chat-tab active" data-tab="chat">
                        <i class="bi bi-chat-dots"></i>
                        <span>对话</span>
                    </div>
                    <div class="chat-tab" data-tab="knowledge">
                        <i class="bi bi-book"></i>
                        <span>知识库</span>
                    </div>
                </div>
                <div class="doc-title" id="current-doc-title">
                    <!-- 当前文档标题 -->
                </div>
                <div class="nav-actions">
                    <!-- 导航操作按钮 -->
                </div>
            </div>
            
            <!-- 聊天内容区域 -->
            <div id="chat-tab-content" class="tab-panel active">
                <div class="chat-container">
                    <div id="chat-output" class="chat-messages">
                        <!-- 聊天消息将通过JavaScript动态生成 -->
                    </div>
                    
                    <!-- 文件附件显示区域 -->
                    <div id="attached-files" class="attached-files" style="display: none;">
                        <div class="attached-file">
                            <div class="file-icon">
                                <i class="bi bi-file-earmark-text"></i>
                            </div>
                            <div class="file-info">
                                <div class="file-name" id="attached-file-name"></div>
                                <div class="file-size" id="attached-file-size"></div>
                            </div>
                            <button class="remove-file-btn" onclick="removeAttachedFile()">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                        <div class="file-prompt" id="file-prompt">
                            <span>只识别附件中的文字</span>
                        </div>
                    </div>
                    
                    <!-- 输入区域 -->
                    <div class="input-area">
                        <!-- 知识库选择 -->
                        <div class="kb-selector-container">
                            <div class="kb-selector-compact">
                                <select id="kb-selector" class="kb-select">
                                    <option value="">默认对话</option>
                                    <!-- 知识库选项将通过JavaScript动态添加 -->
                                </select>
                                <i class="bi bi-database-fill"></i>
                            </div>
                        </div>
                        
                        <div class="message-input-wrapper">
                            <textarea id="user-input" placeholder="给 HzSparrowAI 发送消息" rows="1"></textarea>
                            
                            <div class="input-actions">
                                <button class="action-btn upload-file-btn" onclick="openFileUpload()">
                                    <i class="bi bi-paperclip"></i>
                                </button>
                                
                                <button class="action-btn tools-menu-btn" id="tools-menu-btn">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                
                                <button type="button" class="send-btn" onclick="sendMessage()">
                                    <i class="bi bi-arrow-up-circle-fill"></i>
                                </button>
                            </div>
                            
                            <!-- 工具菜单 -->
                            <div class="tools-menu" id="tools-menu">
                                <button class="tool-item" onclick="clearChat()">
                                    <i class="bi bi-trash"></i>
                                    <span>清空对话</span>
                                </button>
                                <button class="tool-item" onclick="exportChat()">
                                    <i class="bi bi-download"></i>
                                    <span>导出对话</span>
                                </button>
                                <button class="tool-item" onclick="shareChat()">
                                    <i class="bi bi-share"></i>
                                    <span>分享对话</span>
                                </button>
                            </div>
                        </div>
                        
                        <div class="thinking-options">
                            <button class="thinking-option" data-option="R1" id="deep-thinking-btn">
                                <i class="bi bi-lightbulb"></i>
                                <span>深度思考 (R1)</span>
                            </button>
                            <button class="thinking-option" id="web-search-btn">
                                <i class="bi bi-globe"></i>
                                <span>联网搜索</span>
                            </button>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <!-- 知识库内容区域 -->
            <div id="knowledge-tab-content" class="tab-panel">
                <div class="knowledge-container">
                    <div class="knowledge-header">
                        <h2>我的知识库</h2>
                        <button class="kb-add-btn" onclick="showCreateKbModal()">
                            <i class="bi bi-plus"></i>
                            <span>新建知识库</span>
                        </button>
                    </div>
                    
                    <div class="knowledge-list" id="knowledge-list">
                        <!-- 知识库列表将通过JavaScript动态生成 -->
                        <div class="empty-placeholder">
                            <i class="bi bi-book"></i>
                            <p>暂无知识库</p>
                            <p class="hint">点击"新建知识库"创建您的第一个知识库</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文档管理区域 (隐藏) -->
            <div id="docs-section" class="tab-panel">
                <div class="docs-manager-container">
                    <div class="docs-manager-header">
                        <button class="back-btn" onclick="backToKbList()">
                            <i class="bi bi-arrow-left"></i>
                            <span>返回知识库</span>
                        </button>
                        <h2 id="current-kb-name-docs">文档管理</h2>
                        <button class="upload-doc-btn" onclick="showAddDocumentForm()">
                            <i class="bi bi-upload"></i>
                            <span>添加文档</span>
                        </button>
                    </div>
                    
                    <div class="docs-manager-content">
                        <div id="documents-list">
                            <!-- 文档列表将通过JavaScript动态生成 -->
                            <div class="empty-placeholder">
                                <i class="bi bi-file-earmark-text"></i>
                                <p>暂无文档</p>
                                <p class="hint">点击"添加文档"添加第一个文档</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 文档内容区域 (隐藏) -->
            <div id="doc-content-section" class="tab-panel">
                <div class="doc-content-container">
                    <div class="doc-content-header">
                        <button class="back-btn" onclick="backToDocsList()">
                            <i class="bi bi-arrow-left"></i>
                            <span>返回文档列表</span>
                        </button>
                        <h2 id="current-doc-title">文档标题</h2>
                        <div id="document-actions" class="doc-actions">
                            <!-- 文档操作按钮 -->
                        </div>
                    </div>
                    
                    <div class="doc-content-main">
                        <div id="document-content" class="document-content">
                            <!-- 文档内容 -->
                        </div>
                        
                        <div id="document-metadata" class="document-metadata">
                            <!-- 文档元数据 -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 添加文档区域 (隐藏) -->
            <div id="add-document-section" class="tab-panel">
                <div class="add-document-container">
                    <div class="add-document-header">
                        <button class="back-btn" onclick="backToDocsList()">
                            <i class="bi bi-arrow-left"></i>
                            <span>返回文档列表</span>
                        </button>
                        <h2 id="add-document-title">添加文档</h2>
                    </div>
                    
                    <div class="add-document-form">
                        <div class="form-group">
                            <label for="doc-title">
                                <i class="bi bi-type-h1"></i>
                                文档标题
                            </label>
                            <input type="text" id="doc-title" placeholder="请输入文档标题" maxlength="100">
                        </div>
                        
                        <div class="method-tabs">
                            <div class="method-tab active" data-method="text" onclick="switchInputMethod('text')">
                                <i class="bi bi-textarea-t"></i>
                                <span>文本输入</span>
                            </div>
                            <div class="method-tab" data-method="file" onclick="switchInputMethod('file')">
                                <i class="bi bi-file-earmark-arrow-up"></i>
                                <span>文件上传</span>
                            </div>
                        </div>
                        
                        <div id="text-input-method" class="input-method-content">
                            <div class="form-group">
                                <label for="kb-content">
                                    <i class="bi bi-markdown"></i>
                                    文档内容 (支持Markdown格式)
                                </label>
                                <textarea id="kb-content" placeholder="请输入文档内容，支持Markdown格式"></textarea>
                                <button type="button" class="preview-btn" onclick="togglePreview()">
                                    <i class="bi bi-eye"></i>
                                    <span>预览</span>
                                </button>
                            </div>
                            
                            <div id="markdown-preview" class="markdown-preview" style="display: none;">
                                <div class="preview-header">
                                    <h3>Markdown预览</h3>
                                    <button class="close-preview-btn" onclick="togglePreview()">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                                <div class="preview-content"></div>
                            </div>
                        </div>
                        
                        <div id="file-input-method" class="input-method-content" style="display: none;">
                            <div class="file-upload-area">
                                <label for="file-upload" class="file-upload-label">
                                    <i class="bi bi-cloud-upload"></i>
                                    <span>点击上传文件或拖拽文件到此处</span>
                                    <span class="file-types-hint">支持PDF、Word、Excel、TXT等格式</span>
                                    <a href="javascript:void(0);" onclick="showSupportedFileTypes()">查看支持的文件类型</a>
                                </label>
                                <input type="file" id="file-upload">
                            </div>
                            
                            <div id="file-info" class="file-info" style="display: none;">
                                <div class="file-info-header">
                                    <div class="file-details">
                                        <div id="file-name" class="file-name">document.pdf</div>
                                        <div id="file-size" class="file-size">1.2MB</div>
                                    </div>
                                    <button class="remove-file-btn" onclick="removeSelectedFile()">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                                
                                <div id="file-preview-container" class="file-preview-container" style="display: none;">
                                    <div class="file-preview-header">
                                        <h4>文件内容预览</h4>
                                    </div>
                                    <div id="file-content-preview" class="file-content-preview"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <button id="add-document-btn" class="primary-btn">
                                <i class="bi bi-plus-circle"></i> 添加到知识库
                            </button>
                            <button class="secondary-btn" onclick="backToDocsList()">
                                <i class="bi bi-x-circle"></i> 取消
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 知识库弹窗 -->
    <div id="create-kb-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>创建新知识库</h2>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="kb-name">知识库名称</label>
                    <input type="text" id="kb-name" placeholder="请输入知识库名称">
                </div>
                <div class="form-group">
                    <label for="kb-description">知识库描述</label>
                    <textarea id="kb-description" placeholder="请输入知识库描述"></textarea>
                </div>
                <div class="form-actions">
                    <button onclick="createKnowledgeBase()">创建</button>
                    <button class="secondary-btn" onclick="closeModal()">取消</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="notification" class="notification">操作成功!</div>

    <script src="js/marked.min.js"></script>
    <script src="js/knowledge-base.js"></script>
    <script src="js/document-detail.js"></script>
    <script src="js/document-form.js"></script>
    <script src="js/index-main.js"></script>
</body>
</html>